<template>
  <div class="home-view">
    <!-- <el-watermark :content="['自定义水印的内容']"> -->
    <h1>{{ text }}</h1>
    <div v-if="title">{{ title }}</div>
    <span>{{ store.count }}</span>
    <t-space>
      <el-button type="primary" size="default" @click="store.increment()">add</el-button>
      <t-button>sdfafsd</t-button>
      <t-button @click="goForm">goform</t-button>
    </t-space>
    <div class="card-wrapper" ref="cardWrapperRef"></div>
    <!-- </el-watermark> -->
  </div>
</template>

<script setup lang="ts">
import mylog from '@/common/customConsole'
import { useCounterStore } from '../stores/counter'
import { Button as TButton } from 'tdesign-vue-next'

import ExcelJS from 'exceljs'

let title: string | undefined

const text = 'home'

const store = useCounterStore()

const cardWrapperRef = $ref<HTMLDivElement>()
const router = useRouter()
onMounted(() => {
  console.log(import.meta.env)
  mylog.success('home')

  if (cardWrapperRef) {
    for (let i = 0; i < 40; i++) {
      // <div class="card-item normal-shadow">1</div>
      const div = document.createElement('div')
      div.className = 'card-item normal-shadow'
      div.innerHTML = String(i + 1)
      div.style.backgroundColor = 'yellow'
      cardWrapperRef.appendChild(div)
    }
  }

  setTimeout(() => {
    if (cardWrapperRef) {
      const childNodes = cardWrapperRef.childNodes

      const size = childNodes.length
      let middle = -1
      let double = false
      if (size % 2 !== 0) {
        double = false
        // 奇数
        middle = (size + 1) / 2 - 1
      } else {
        // 偶数
        double = true
        middle = size / 2 - 1
      }
      console.log('length is ', size, '中心值', middle)

      childNodes.forEach((item, index) => {
        const child = item as HTMLDivElement

        // console.log('item', item)

        let rotate = 10
        let lastRotate = 0
        if (!double) {
          if (index <= middle) {
            lastRotate = rotate * (middle - index)
            console.log(`  ${lastRotate} = ${rotate} *   (${middle} - ${index})  `)
          } else {
            rotate = -10
            lastRotate = rotate * (index - middle)
            console.log(` ${lastRotate} = ${rotate} * (${index} - ${middle})`)
          }
        } else {
          if (index <= middle + 1) {
            lastRotate = rotate * (middle - index)
            console.log(`  ${lastRotate} = ${rotate} *   (${middle} - ${index})  `)
          } else {
            rotate = -10
            lastRotate = rotate * (index - middle)
            console.log(` ${lastRotate} = ${rotate} * (${index} - ${middle})`)
          }
        }

        child.style.zIndex = String(childNodes.length - index)
        child.style.transformOrigin = 'bottom left'
        child.style.transform = `rotate(${lastRotate}deg)`
        child.style.transition = '0.5s ease'
        // child.style.transform = `translate3d(0, ${index * 100}px, 0)`

        child.addEventListener('mouseenter', () => {
          child.style.transform = ` scale(1.2, 1.2) rotate(${lastRotate}deg)`
        })

        child.addEventListener('mouseleave', () => {
          child.style.transform = `  rotate(${lastRotate}deg)`
        })
      })
    }
  }, 2000)
})

const goForm = () => {
  router.push({
    path: '/form',
    state: {
      title: '表单页面'
    }
  })
}

/**
 * 下载表格模板
 */
//@ts-ignore
const downloadTableTemplate = async () => {
  const workbook = new ExcelJS.Workbook()
  const worksheet = workbook.addWorksheet('Sheet 1')
  worksheet.columns = [
    { header: '原词语', key: 'oldWord', width: 32 },
    { header: '新词语', key: 'newWord', width: 32 }
  ]
  const buffer = await workbook.xlsx.writeBuffer()
  const blob = new Blob([buffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = '个人词库导入模板.xlsx'
  link.click()
}
</script>

<style lang="scss" scoped>
.home-view {
  background-color: var(--vt-c-white-custom-2);
  height: 100%;

  :deep(.card-wrapper) {
    position: relative;
    left: 500px;
    width: 100px;
    height: 200px;
    .card-item {
      width: 100px;
      height: 200px;
      position: absolute;
      left: 0;
      bottom: 0;
      border-radius: 1rem;
    }
  }

  .el-watermark {
    height: 100%;
  }
}
</style>
